<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <title>Summary</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
    <#include "/include/new_resource.html"/>
    <style>
        .uploadFile {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 2;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="summary-box">
        <div class="hd">
            <h3>Summary</h3>
            <div class="btns g-button-wrap">
                <button class="colse-button g-button-style" onclick="history.back();" type="button">Close</button>
            </div>
        </div>
        <div class="bd">
            <div class="information item">
                <div class="title g-title">
                    <h3>Basic Information</h3>
                </div>
                <div class="content">
                    <div class="stetup-photos">
                        <div class="photos-wrap">
                            <div class="img">
                                <input type="file" class="uploadFile" name="mainFile" accept="image/*"
                                       id="mainUpload" multiple="">
                                <input type="hidden" name="img" id="mainUploadImgInput" value="${template.img!}">
                                <img src="${base}${template.img!}" id="mainUploadImg" alt="">
                            </div>
                        </div>
                        <div class="optional">
                            <div class="tit">Setup Photos (Optional)</div>
                        </div>
                        <div class="photos-list ">
                            <div class="file">
                                <input type="file" name="file" accept="image/*" id="upload" multiple="">
                                <div class="desc">
                                    <div class="box">
                                        <p class="t1">Drag and drop images here</p>
                                        <p class="t2">- or -</p>
                                        <p class="t3">Browse files from your computer</p>
                                    </div>
                                </div>
                            </div>
                            <div class="content-img scrollBox">
                                <ul class="content-img-list ">
                                    <li>
                                        <div class="img">
                                            <img src="images/img_02.png" alt="">
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <img src="images/img_03.png" alt="">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="info">
                        <div class="result-box">
                            <div class="left">
                                <ul>
                                    <li>
                                        <div class="tit">
                                            ID
                                        </div>
                                        <div class="content">
                                            <p>${template.id!}</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Name
                                        </div>
                                        <div class="content">
                                            <p>${template.name!}</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Client
                                        </div>
                                        <div class="content">
                                            <p>${template.clientName!}</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Product Category
                                        </div>
                                        <div class="content">
                                            <p>${template.productCategory!}</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Background Style
                                        </div>
                                        <div class="content">
                                            <p>${template.photoType!}</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Props
                                        </div>
                                        <div class="content">
                                            <p>${template.props!}</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Notes (Optional)
                                        </div>
                                        <div class="content">
                                            <p>${template.memo!}</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="right" style="margin-right: 100px;">
                                <ul>
                                    <li>
                                        <div class="tit">
                                            Photo Style
                                        </div>
                                        <div class="content">
                                            <p>${template.photoStyle!}</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Lighting Style
                                        </div>
                                        <div class="content">
                                            <p>${template.lightingStyle!}</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Scene Style
                                        </div>
                                        <div class="content">
                                            <p>${template.sceneStyle!}</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="edit-button">
                    <button style="display: none;" class="g-button-style" type="button">Edit</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 遮罩层 -->
<div class="shade"></div>
<<#include "/include/new_js_resource.html"/>
<script src="${base}/static/js/uploadimg.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    let baseUrl = '${base}';
    let clientName_select;
    let productCategory_select;
    let img1 = '${template.img1!}';
    let img2 = '${template.img2!}';
    let img3 = '${template.img3!}';
    let img4 = '${template.img4!}';
    let img5 = '${template.img5!}';
    initImgs(img1);
    initImgs(img2);
    initImgs(img3);
    initImgs(img4);
    initImgs(img5);
    addNewContent(imgBox);

    function initImgs(img) {
        if (img) {
            imgFile.push(img);
            imgSrc.push(baseUrl + img);
            imgName.push(img);
            imgUploadUrl.push(img);
        }
    }

    function save() {
        imgUploadUrl.forEach((obj, i) => {
            $("input[name='img" + (i + 1) + "']").val(obj);
        })
        let clientName_ss = getSelectValue(clientName_select)
        let productCategory_ss = getSelectValue(productCategory_select);
        $("input[name='clientName']").val(clientName_ss);
        $("input[name='productCategory']").val(productCategory_ss);

        HF.ajaxFormSubmit('templateForm', function (result) {
            HF.Alert("Save Success");
            // document.location.reload();
        }, function (e) {
            HF.Alert("Save Failure");
        });
    }

    function pushImg(obj) {
        var url = '${base}' + "/admin/parameters/mainImgeUpload";
        var files = $("#mainUpload").get(0).files[0]; //获取file控件中的内容
        var fd = new FormData();
        fd.append("uploadFile", files);
        $.ajax({
            type: "POST",
            contentType: false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
            processData: false, //必须false才会自动加上正确的Content-Type
            url: url,
            data: fd,
            success: function (msg) {

                var obj = eval('(' + JSON.stringify(msg) + ')');

                if (obj.SUCESS) {
                    let url = '${base}' + obj.DATA;
                    //填充图片
                    $("#mainUploadImg").attr("src", url);
                    //写入隐藏域
                    $("#mainUploadImgInput").val(obj.DATA);
                }
            },
            error: function (msg) {
                //debugger;
                HF.Alert("error");
            }
        });
    }

    $(function () {
        $(".scrollBox").scrollBar();
    })

    function getSelectValue(category) {
        let objects = category.getValue();
        let values = "";
        if (objects.length > 0) {
            values = objects.reduce((prev, cur) => {
                if (prev && prev.length > 0) {
                    return prev + "," + cur.value;
                } else {
                    return cur.value;
                }
            }, "")
        }
        return values;
    }
</script>
</body>

</html>